<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<input type="text" name="">
	<button>查询</button>
	<img src="">
	<ul></ul>
	<script type="text/javascript">
		let btn = document.querySelector("button")
		let inp = document.querySelector("input")
		let img = document.querySelector("img")


		btn.onclick = function(){
			let xhr1 = new XMLHttpRequest()
			xhr1.open("get", `https://geoapi.qweather.com/v2/city/lookup?location=${inp.value}&key=c494e264764449f7b4f6bf742276d7f9`)

			xhr1.send()

			xhr1.onreadystatechange = function(){
				if(xhr1.readyState == 4){
					let res1 = JSON.parse(xhr1.responseText)
					let location = res1.location
					wea(res1.location[0].id)
					
				}		
			}
		}

		function wea(id) {
			let xhr1 = new XMLHttpRequest()
			xhr1.open("get", `https://devapi.qweather.com/v7/weather/now?location=${id}&key=c494e264764449f7b4f6bf742276d7f9`)

			xhr1.send()
		
			xhr1.onreadystatechange = function(){
				if(xhr1.readyState == 4){
				   let res1 = JSON.parse(xhr1.responseText)
				   console.log(res1)
				   if(res1.code == 200){
				   	img.src = `https://a.hecdn.net/img/common/icon/202106d/${res1.now.icon}.png `
				   }
				}
			}
		}

		/*

			状态码：
			1** 信息，服务器接收到请求
			2** 成功，请求成功接受并处理
			3** 重定向
			4** 客户端错误 语法错误或者无法完成请求
			5** 服务器错误

			*200--成功
			*400--语法错误
			*401--未授权 没登陆
			*403--请求的资源被服务器拒绝
			*404--表面服务器无法找到指定的资源（URL写错了）
			405--请求方法被禁用
			500--表示服务端在执行请求的时候发生了错误
			502--服务器网关出现了错误
			503--服务器处于停机维护 现在无法处理请求



		*/
	</script>
</body>
</html>